iT邦幫忙

2024 iThome 鐵人賽

DAY 15
0
AI/ ML & Data

基於人工智慧與深度學習對斑馬魚做行為分析系列 第 15

day 15 Lstm 結合yolo 多隻斑馬魚使用介面

  • 分享至 

  • xImage
  •  

今天是第十五天我們可以寫一個多隻斑馬魚的使用者介面,以下是程式碼
html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YOLO 和 LSTM 網頁界面</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>YOLO 和 LSTM 網頁界面</h1>
        <div class="file-input">
            <label for="file">Select Image/Video:</label>
            <input type="file" id="file" accept=".gif">
        </div>
        <button id="yolo-button">YOLO 辨識結果</button>
        <div id="image-container"></div>
        <div id="buttons-container" style="display: none;">
            <button id="zebrafish-video">斑馬魚運動軌跡影片</button>
            <button id="normal-behavior">正常佔比</button>
            <button id="fear-behavior">害怕佔比</button>
            <button id="anxiety-behavior">焦慮佔比</button>
            <button id="depression-behavior">壓抑佔比</button>
            <button id="download-video">下載影片</button>
        </div>
    </div>

    <script src="main.js"></script>
</body>
</html>

css部分

body {
    background-color: lightblue;
    font-family: Arial, sans-serif;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.file-input {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

button {
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

#image-container img {
    max-width: 100%;
    margin-top: 20px;
}

#buttons-container {
    margin-top: 20px;
    text-align: center; /* 使按鈕區域內的按鈕居中對齊 */
}

#buttons-container button {
    display: inline-block;
    margin: 10px 5px; /* 調整按鈕間距 */
    width: 45%; /* 每個按鈕寬度調整為父容器的45%,使每行最多容納兩個按鈕 */
    box-sizing: border-box; /* 包括內邊距和邊框在內的總寬度計算 */
}

javascript部分

document.getElementById('yolo-button').addEventListener('click', function () {
    const fileInput = document.getElementById('file');

    if (fileInput.files.length === 0) {
        // 如果沒有選擇圖片文件,仍然顯示功能按鈕
        document.getElementById('buttons-container').style.display = 'block';
        return;
    }

    const file = fileInput.files[0];

    // 假設這裡有 YOLO 計算邏輯
    // 目前只展示圖片
    const reader = new FileReader();
    reader.onload = function (e) {
        const imageContainer = document.getElementById('image-container');
        const img = document.createElement('img');
        img.src = e.target.result;
        imageContainer.innerHTML = '';
        imageContainer.appendChild(img);

        // 顯示四個功能按鈕
        document.getElementById('buttons-container').style.display = 'block';
    };
    reader.readAsDataURL(file);

    // 顯示功能按鈕
    document.getElementById('buttons-container').style.display = 'block';
});

document.getElementById('zebrafish-video').addEventListener('click', function () {
    // 播放斑馬魚運動軌跡影片的邏輯
    console.log('斑馬魚運動軌跡影片');
});

document.getElementById('normal-behavior').addEventListener('click', function () {
    // 顯示正常佔比的邏輯
    console.log('斑馬魚行為 (正常佔比)');
});

document.getElementById('fear-behavior').addEventListener('click', function () {
    // 顯示害怕佔比的邏輯
    console.log('斑馬魚行為 (害怕佔比)');
});

document.getElementById('anxiety-behavior').addEventListener('click', function () {
    // 顯示焦慮佔比的邏輯
    console.log('斑馬魚行為 (焦慮佔比)');
});

document.getElementById('depression-behavior').addEventListener('click', function () {
    // 顯示壓抑佔比的邏輯
    console.log('斑馬魚行為 (壓抑佔比)');
});

document.getElementById('download-video').addEventListener('click', function () {
    // 下載影片的邏輯
    console.log('下載影片');
    // 這裡假設有一個已處理好的影片文件
    const link = document.createElement('a');
    link.href = 'path/to/your/video.mp4'; // 替換為實際的影片文件路徑
    link.download = 'video.mp4';
    link.click();
});

這些段程式碼建立了一個網頁應用程式,結合了YOLO和LSTM模型,用來辨識上傳的影像或影片,並分析斑馬魚的行為。

1. index.html - 網頁的結構

這個檔案定義了網頁的基本結構,包括標題、樣式表連結、以及主要的互動元件。

  • <div class="container">: 包含了整個網頁的主要內容,包括標題、檔案上傳區域、辨識按鈕和功能按鈕區域。
  • 檔案上傳: 用戶可以通過檔案上傳元件 (<input type="file">) 選擇要辨識的影像或影片。
  • YOLO 辨識按鈕: 用戶點擊此按鈕後,會觸發YOLO模型來處理上傳的影像,並顯示結果。
  • 功能按鈕區域: 當YOLO辨識完成後,將顯示一組功能按鈕,用來進行斑馬魚的行為分析和影片下載。

2. style.css - 網頁的樣式

這個檔案控制了網頁的外觀和佈局,讓應用程式看起來更美觀。

  • 背景和字體: 使用淺藍色作為背景色,並設定了全局的字體樣式。
  • 容器樣式: 設定了容器的最大寬度、內邊距、背景色和圓角,讓內容居中並顯示在白色背景上。
  • 按鈕樣式: 定義了按鈕的顏色、邊框、邊距和滑鼠懸停效果,讓按鈕具有視覺上的反饋效果。
  • 功能按鈕佈局: 讓功能按鈕在網頁上對齊,並以行為單位進行排列,使它們顯示在合適的位置。

3. main.js - 網頁的互動邏輯

這個檔案包含了所有的JavaScript邏輯,負責管理用戶互動和功能的觸發。

  • YOLO 辨識結果按鈕 (yolo-button):

    • 監聽按鈕點擊事件,檢查用戶是否上傳了檔案。
    • 使用 FileReader 將上傳的檔案讀入並顯示在頁面上。
    • 一旦圖片顯示完成,則顯示與斑馬魚行為分析相關的功能按鈕。
  • 斑馬魚運動軌跡影片 (zebrafish-video):

    • 監聽影片按鈕的點擊事件,用來觸發斑馬魚運動軌跡影片的播放。
  • 斑馬魚行為分析:

    • 包含四個按鈕,分別用來顯示斑馬魚行為的「正常佔比」、「害怕佔比」、「焦慮佔比」和「壓抑佔比」。
    • 每個按鈕都有相應的邏輯,用來處理並顯示這些行為的結果。
  • 下載影片 (download-video):

    • 監聽按鈕點擊事件,觸發影片的下載邏輯。用戶可以通過此按鈕下載處理過的影片檔案。

這個網頁應用程式提供了一個直觀且簡單的介面,讓用戶可以輕鬆上傳影像或影片,進行YOLO辨識,並進一步分析斑馬魚的行為,讓使用者很容易上手做斑馬魚行為分析。


上一篇
day 14 yolo辨識氣候變遷
下一篇
day 16 Lstm結合yolo多斑馬魚相互影響行為分析
系列文
基於人工智慧與深度學習對斑馬魚做行為分析30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言